import React, {useState} from "react";
import {fromJS} from "immutable";

export default function App() {
    const [state, setState] = useState({
        info: {
            name: "zhangyi",
            location: {
                "province": "四川",
                "city": "广安"
            },
            favor: ["吃饭", "睡觉", "写代码"]
        }
    })

    const oldState = fromJS(state);

    return <div>
        <h1>个人信息修改</h1>
        <br/>
        <button onClick={() => {
            const newState = oldState.setIn(["info", "name"], "111").toJS()
            setState(newState)
        }}>修改名字
        </button>
        <div>{state.info.name}</div>
        <br/>
        {state.info.location.province} - {state.info.location.city}
        <br/>
        <ul>
            {state.info.favor.map((item, index) => {
                return <li key={item}>
                    {item}
                    <button onClick={() => {
                        // 删除数组中的元素updateIn
                        const newState = oldState.updateIn(["info", "favor"], (list) => list.splice(index, 1)).toJS()
                        setState(newState)
                    }}>删除
                    </button>
                </li>
            })}
        </ul>
    </div>
}